<template>
  <el-dialog :title="title" v-model="collectionVisible" width="520px" :fullscreen="mobile" class="dialog-content-clear">
    <el-alert :title="alert" type="warning" :closable="false" />
    <div class="ph-16">
      <div class="primary-section mt20">
        <el-space>
          <el-space>
            <span>费用名称</span>
            <span>房费A101</span>
          </el-space>
          <el-space>
            <span>账单金额</span>
            <span>+500.00元</span>
          </el-space>
          <el-space>
            <span>待收日期</span>
            <span>2024-02-01</span>
          </el-space>
        </el-space>
      </div>
      <el-form :model="collectionForm" ref="collectionFormRef" label-position="top">
        <div class="primary-section mt20">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="collectionForm.remark" type="textarea" :rows="3" show-word-limit :max="150" placeholder="请填写备注信息"></el-input>
          </el-form-item>
        </div>
        <div class="primary-section mt20">
          <el-form-item label="凭证图片" prop="pictureUrlList">
            <el-row>
              <el-col :span="24">
                <div class="fs-base fc-secondary">限3张，图片大小不超过10M</div>
              </el-col>
              <el-col :span="24">
                <el-upload
                  v-model:file-list="collectionPictureUrlList"
                  action="#"
                  list-type="picture-card"
                  :http-request="collectionPictureRequestUpload"
                  :before-upload="collectionPictureBeforeUpload"
                  :multiple="true"
                  :limit="3"
                  :class="{'is-full': collectionPictureUrlList.length === 3}"
                >
                  <el-icon><Plus /></el-icon>
                </el-upload>
              </el-col>
            </el-row>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleCollectionOk">
          完成收款
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup name="CollectionDl">
import useAppStore from '@/store/modules/app'

const emit = defineEmits()
const props = defineProps({
  type: String,
  form: {
    type: Object,
    defult: () => {}
  }
})

const collectionVisible = ref(false)
const collectionPictureUrlList = ref([])
const data = reactive({
  collectionForm: {
    remark: null,
    pictureUrlList: []
  },
})
const { collectionForm } = toRefs(data)
const mobile = computed(() => useAppStore().device === 'mobile')
const title = computed(() => {
  if (props.type === 'collection') return '收款'
  if (props.type === 'payment') return '付款'
  return '收款'
})
const alert = computed(() => {
  if (props.type === 'collection') return '提示：收款后账单将显示在完成账单中。'
  if (props.type === 'payment') return '提示：付款后账单将显示在完成账单中。'
  return '提示：收款后账单将显示在完成账单中。'
})

// 图片上传 覆盖默认上传行为
function collectionPictureRequestUpload() {}
/** 上传预处理 */
function collectionPictureBeforeUpload(file) {
  console.log(file, pictureUrlList.value)
  // if (file.type.indexOf("image/") == -1) {
  //   proxy.$modal.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
  // } else {
  //   const reader = new FileReader();
  //   reader.readAsDataURL(file);
  //   reader.onload = () => {
  //     options.img = reader.result;
  //     options.filename = file.name;
  //   };
  // }
}

/* 完成收款 */
function handleCollectionOk() {
  emit('ok', collectionForm.value)
}

function show() {
  collectionVisible.value = true
}
function close() {
  collectionVisible.value = false
}

defineExpose({
  show,
  close
})
</script>
